<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #a1 {
        width: 302px;
        height: 160px;
        margin: 0 auto;
        border: 1px solid #000;
    }
    .a1-1 {
        width: 30px;
        height: 100px;
        float: left;
        margin: 15px 15px;
        border-radius: 30%;
        animation: kxf .5s ease infinite alternate;
        -webkit-animation: kxf .5s ease infinite alternate;
    }
    .a1-1:nth-child(1) {
        background-color: red;
        animation-delay: .1S;
        -webkit-animation-delay: .1S;
    }
    .a1-1:nth-child(2) {
        background-color: #000;
        animation-delay: .2S;
        -webkit-animation-delay: .2S;
    }
    .a1-1:nth-child(3) {
        background-color: forestgreen;
        animation-delay: .3S;
        -webkit-animation-delay: .3S;
    }
    .a1-1:nth-child(4) {
        background-color: peru;
        animation-delay: .4S;
        -webkit-animation-delay: .4S;
    }
    .a1-1:nth-child(5) {
        background-color: pink;
        animation-delay: .5S;
        -webkit-animation-delay: .5S;
    }
    .a1-2 {
        text-align: center;
    }
    @keyframes kxf {
        0% {
            transform: scale(1,1);
            -webkit-transform: scale(1,1);
        }
        100% {
            transform: scale(1,0.5);
            -webkit-transform: scale(1,0.5);
        }
    }
    @-webkit-keyframes kxf {
        0% {
            transform: scale(1,1);
            -webkit-transform: scale(1,1);
        }
        100% {
            transform: scale(1,0.5);
            -webkit-transform: scale(1,0.5);
        }
    }
</style>
<body>
    <div id="a1">
        <div class="a1-1"></div>
        <div class="a1-1"></div>
        <div class="a1-1"></div>
        <div class="a1-1"></div>
        <div class="a1-1"></div>
        <div class="a1-2">padding</div>
    </div>
</body>
</html>